/* 页面整体布局设置 */
body {
    /* 使用 Flex 布局，使子元素按列排列 */
    display: flex;

    /* 设置主轴方向为垂直方向（从上到下） */
    flex-direction: column;
}

/* 主要内容区域（main 容器） */
main.container {
    /* 允许主内容区域占据剩余空间，不收缩，不固定大小 */
    flex: 1 0 auto;
    /* 等价于：
       flex-grow: 1;    // 可以扩展填充可用空间
       flex-shrink: 0;  // 不收缩
       flex-basis: auto;// 基础宽度为内容大小
    */
}

/* 页脚样式（确保它不被压缩） */
.site-footer {
    /* 不允许页脚被压缩，即使空间不足也保持其高度 */
    flex-shrink: 0;
}
